<template>
  <div class="music-box clearfix">
    <ul>
      <li class="box-item" v-for="item in musicListData">
        <div class="item-image">
          <router-link :to="{path: '/music/detail/'+item._id}"><img :src="item.image" alt="" height="100%" width="100%"></router-link>
          <span>xxx</span>
        </div>
        <p class="title">{{item.title}}</p>
        <p class="by-user">by——{{item.user.name}}</p>
        <div class="hr-90"></div>
        <div class="music-info">
          <div class="info-item">
            <span class="fa fa-eye"></span>
            {{item.see_num}}
          </div>

          <div class="info-item">
            <span class="fa fa-commenting"></span>
            xxx
          </div>

          <div class="info-image">
            <img :src="item.user.thumb" alt="" width="25" height="25">
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
      props: {
        musicListData: {
          type: Array,
          default() {
            return [];
          }
        }
      },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">
  .music-box{
    width: 100%;
    padding: 20px;
    position: relative;
    .box-item{
      width: 248px;
      height: 248px;
      border-radius: 10px;
      border: 0 solid !important;
      position: relative;
      background: #FFF;
      overflow: hidden;
      box-shadow: 0 0 1px #888;
      float: left;
      margin-right: 42px;
      margin-bottom: 20px;
      .item-image{
        width:100%;
        height: 150px;
        overflow: hidden;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        position: relative;
        margin-bottom: 10px;
        span{
          position: absolute;
          top: 0;
          left: 0;
          padding: 7px;
          background: rgba(224,131,175,0.6);
          border-bottom-right-radius: 10px;
          border-top-left-radius: 10px;
          font-size: 16px;
          color: #DFDFDF;
          width: 58px;
          text-align: center;
        }
      }
      .title{
        padding: 0 2px;
        width: 230px;
        margin: 2px 0 15px 6px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .by-user{
        padding: 2px 0 5px 12px;
      }
      .hr-90{
        width: 90%;
        border-top: 1px solid #ccc;
        margin: 0 auto;
        margin-top: 5px;
      }
      .music-info{
        width: 100%;
        height: 30px;
        background: #F5F5F5;
        padding: 10px;
        .info-item{
          float: left;
          margin-right: 10px;
        }
        .info-image{
          width: 25px;
          height: 25px;
          border-radius: 50%;
          overflow: hidden;
          float: right;
          margin-right: 20px;
          margin-top: -5px;
        }
      }
    }
  }
</style>
